<template>
  <!--向导-->
  <el-steps :active="active" finish-status="success">
    <el-step
      v-for="(item, index) in cardOrder"
      :key="index"
      :title="item.title"
    >
    </el-step>
  </el-steps>
  <!--表单-->
  <el-form
    :model="model"
    ref="formControl"
    :inline="false"
    class="demo-form-inline"
    :label-suffix="labelSuffix"
    :label-width="labelWidth"
    :size="size"
    v-bind="$attrs"
  >
    <el-card class="box-card" style="margin-bottom: 10px;"
      v-for="(item, index) in cardOrder"
      :key="index"
      v-show="active === index"
    >
      <template #header>
        <div class="card-header">
          <span>{{item.title}}</span>
        </div>
      </template>
      <base-item
        :colOrder="item.colIds"
        :itemMeta="itemMeta"
        :ruleMeta="ruleMeta"
        :showCol="showCol"
        :formColSpan="formColSpan"
        :model="model"
        :size="size"
        >
      </base-item>
    </el-card>    
  </el-form>
  <el-button type="" @click="next">下一步</el-button>
</template>

<script>
/* eslint-disable vue/no-setup-props-destructure */
  import { defineComponent, ref } from 'vue'
  import { ElForm, ElCard, ElButton, ElSteps, ElStep } from 'element-plus'
  // 封装 el-form-item
  import baseItem from './base-item.vue'

  // 表单控件的属性 
  import { formProps, formController } from '../map'

  export default defineComponent({
    name: 'el-from-div',
    components: {
      baseItem,
      ElForm, ElCard, ElButton, ElSteps, ElStep
    },
    props: {
      ...formProps
    },
    setup (props, context) {
      // console.log('表单控件的props：', props)

      // 获取 $ref
      const formControl = ref(null)

      const {
        formMeta,
        itemMeta,
        model,
        partModel
      } = props

      // 调用表单的控制类
      const {
        formColSpan, // 确定组件占位
        // formRules, // 表单的验证规则
        showCol, // 是否显示字段的对象
        setFormColShow, // 设置组件联动
      } = formController(formMeta, itemMeta, model, partModel)

      // 获取分栏信息
      const { subMeta } = formMeta

      if (subMeta.type === 'card1'){}

      const cardOrder = subMeta.cols ?? []
      
      // tab 
      const active = ref(0)

      const next = () => {
        active.value ++
        if (active.value >= cardOrder.length ) {
          active.value = 0
        }
      }

      return {
        ...formMeta,
        itemMeta,
        cardOrder,
        active, // step 的步骤
        next, // 下一步
        showCol, // 是否显示字段的对象
        formColSpan, // 确定组件占位
        // 函数
        setFormColShow, // 设置组件联动
        //
        formControl // 获取表单dom

      }
    }
  })
</script>